<template>
  <div class="outer">
    <div class="head">
      <div class="headcontent">
        <!-- <div class="state">最新</div> -->
        <div class="title">
          <div class="left">
            <div class="positionName">{{ jobDetails.positionName }}</div>
            <div class="salary">{{ jobDetails.salary }}</div>
          </div>
          <div class="right">
            <div class="welfare">
              <ul>
                <li
                  v-for="(item, index) in jobDetails.companyWelfareList"
                  :key="index"
                >
                  {{ item }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="information">
          <ul>
            <li style="display: flex">
              <span style="margin-right: 5px"
                ><svg-icon icon-name="place" class="sendno"></svg-icon></span
              >{{ jobDetails.city }}
            </li>
            <li style="display: flex">
              <span style="margin-right: 5px"
                ><svg-icon
                  icon-name="experience"
                  class="sendno"
                ></svg-icon></span
              >{{ jobDetails.experience }}
            </li>
            <li style="display: flex">
              <span style="margin-right: 5px"
                ><svg-icon icon-name="degree" class="sendno"></svg-icon></span
              >{{ jobDetails.education }}
            </li>
          </ul>
        </div>
        <!-- <div style="display: flex">
          <div class="collection" @click="collection" v-if="!jobDetails.collect">
            <svg-icon icon-name="love" class="sendno_love"></svg-icon>
            <svg-icon icon-name="love_white" class="sendnoWhite"></svg-icon>
            <div class="loveTitle">感兴趣</div>
          </div>

          <div class="cancel" @click="cancellation" v-if="jobDetails.collect">
            <svg-icon icon-name="cancel" class="sendno_cancel"></svg-icon>
            <svg-icon icon-name="cancel_white" class="cancelWhite"></svg-icon>
            <div class="loveTitle">取消关注</div>
          </div>

          <div class="collection" @click="submitresume">
            <div>投递简历</div>
          </div>
        </div> -->
      </div>
    </div>
    <div class="footer">
      <div class="left">
        <div class="job-desciption">
          <div class="recommend">职位描述</div>
          <div class="label">
            <ul>
              <li
                v-for="(item, index) in jobDetails.positionTagsList"
                :key="index"
              >
                {{ item }}
              </li>
            </ul>
          </div>
          <div class="content">
            <pre
              style="
                font-size: 16px;
                margin-left: 10px;
                margin-top: 5px;
                width: 100%;
                white-space: pre-wrap;
                word-wrap: break-word;
                overflow-wrap: break-word;
              "
              >{{ jobDetails.content }}</pre
            >
          </div>
          <!-- <div class="salarydetail">
            <div class="title">薪资详情</div>
            <div class="content">
              <ul>
                <li>薪资范围:4000-5000元/月</li>
                <li>职位底薪:4000元/月</li>
                <li>社保类型:五险</li>
                <li>提成方式:按单提成;</li>
                <li>奖金补贴:交通补助、年终奖、绩效奖金、全勤奖、工龄奖</li>
              </ul>
            </div>
          </div> -->
          <div class="container">
            <div class="divider"></div>
            <!-- 上分割线 -->
            <div class="content">
              <img class="logo" :src="jobDetails.hrAvatarUrl" />
              <div class="contentright">
                <div class="name">{{ jobDetails.respPerson }}</div>
                <div class="company">{{ jobDetails.respPos }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="company-introduction">
          <div class="introduction">公司介绍</div>
          <div class="content">
            {{ jobDetails.companyProfile }}
          </div>
          <!-- <div class="business-information">工商信息</div> -->
          <!-- <div class="buscontent">
            <div class="above">
              <div class="info-item">
                <span>公司名称：</span>
                <span>广州翼舟通讯服务有限公司</span>
              </div>
              <div class="info-item">
                <span>法定代表人：</span>
                <span>马飞</span>
              </div>
              <div class="info-item">
                <span>成立日期：</span>
                <span>2024-05-27</span>
              </div>
            </div>
            <div class="under">
              <div class="info-item">
                <span>企业类型：</span>
                <span>有限责任公司（自然人投资或控股）</span>
              </div>
              <div class="info-item">
                <span>经营状态：</span>
                <span>在营</span>
              </div>
              <div class="info-item">
                <span>注册资本：</span>
                <span>100万人民币</span>
              </div>
            </div>
            <div class="all">查看全部</div>
          </div> -->
          <div class="adddress">工作地址</div>
          <div style="width: 100%; height: 200px; margin-top: 10px">
            <Map />
          </div>
        </div>
      </div>
      <div class="right">
        <div class="companycard">
          <div class="companytail">公司基本信息</div>
          <div class="company">
            <img :src="jobDetails.logo" class="company-icon" />
            <div class="company-name">{{ jobDetails.companyName }}</div>
          </div>
          <div class="company-details">
            <ul>
              <li>{{ jobDetails.companySize }}</li>
              <li>{{ jobDetails.experience }}</li>
              <li>{{ jobDetails.industryType }}</li>
            </ul>
          </div>
          <div class="detail" @click="router.push('/jobRecommendation')">
            查看全部职位
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import {
  getjobPostingDetailed,
  addjobCollect,
  deleteJobCollect,
  submitResume,
} from "@/api/position";
import {
  getAttachment,
  delAttachment,
  getselectSimilar,
} from "@/api/attachmentResume";
import Map from "@/components/Map.vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { bus } from "@/utils/mitt";

const route = useRoute();
const router = useRouter();

const positionId = route.query.id; // 获取查询参数 id

const jobDetails = ref({});
const jobsimilars = ref({});
const latitudeAndLongitude = ref([]);

const getjobPostingdetail = async () => {
  const res = await getjobPostingDetailed(positionId);
  if (res.code === 200) {
    jobDetails.value = res.data;
    latitudeAndLongitude.value = [res.data.longitude, res.data.latitude];
    bus.emit("latitudeAndLongitude", latitudeAndLongitude.value);
    bus.emit("companyAddress", jobDetails.value.address);
  } else {
    ElMessage.error(res.msg);
  }
};
getjobPostingdetail();

//职位收藏
const collection = async () => {
  const res = await addjobCollect(positionId);
  if (res.code === 200) {
    ElMessage.success("收藏成功");
    console.log("收藏后的值：", jobDetails.value.collect);
    getjobPostingdetail();
  } else {
    ElMessage.error(res.msg);
  }
};

//职位取消收藏
const cancellation = async () => {
  const res = await deleteJobCollect(positionId);
  if (res.code === 200) {
    ElMessage.success("取消收藏成功");
    console.log("取消收藏后的值：", jobDetails.value.collect);
    jobDetails.value.collect = false;
    getjobPostingdetail();
  } else {
    ElMessage.error(res.msg);
  }
};

const resumeId = ref();
const dialogVisible = ref(false);

// 获取附件简历
const attachmentResume = ref();
const total = ref();
const pageNum = ref(1);
const pageSize = ref(3);
const queryAttachmentResume = async () => {
  const res = await getAttachment(pageNum.value, pageSize.value);
  console.log(res);
  attachmentResume.value = res.data.list;
  total.value = res.data.list.length;
};
queryAttachmentResume();
//投递简历
const submitresume = () => {
  if (jobDetails.value.submit) {
    ElMessage.warning("已投递过该职位");
  } else {
    dialogVisible.value = true;
  }
};
const selectResumeIndex = ref();
const selectResume = async (id, index) => {
  selectResumeIndex.value = index;
  resumeId.value = id;
  console.log(id);
  console.log(index + "`````````" + selectResumeIndex.value);
};
const cancel = () => {
  dialogVisible.value = false;
  selectResumeIndex.value = null;
};

const submit = async () => {
  const res = await submitResume(positionId, resumeId.value);
  if (res.code === 200) {
    ElMessage.success("投递成功");
    selectResumeIndex.value = null;
    dialogVisible.value = false;
  } else {
    ElMessage.error(res.msg);
    selectResumeIndex.value = null;
    dialogVisible.value = false;
  }
};

//查看全部职位
const toallposition = (id: number) => {
  router.push(`/position/allPosition?id=${id}`);
};

//查看相似职位
const tosimilarposition = () => {
  router.push(`/position`);
};

//获取相似职位
const getselectSimilars = async () => {
  const res = await getselectSimilar(positionId, pageNum.value, 9);
  if (res.code === 200) {
    console.log(res.data);
    jobsimilars.value = res.data.list;
    total.value = res.data.total;
  } else {
    ElMessage.error(res.msg);
  }
};
getselectSimilars();

const limitedJobs = computed(() => {
  return Object.values(jobsimilars.value).slice(0, 5);
});

//跳转到详情页
const toDetail = (id: number) => {
  console.log("跳转成功", id);
  router.push(`/position/jobDetails?id=${id}`);
};
</script>


<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

ul {
  padding-left: 0;
  list-style-type: none;
}

.outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

/* 上部分 */
.head {
  width: 100%;
  color: #333;
}

.headcontent {
  margin: 20px 13% 20px 10%;
}

.state {
  font-size: 14px;
  margin-bottom: 10px;
}

.title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.title .left {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.positionName {
  font-size: 25px;
  font-weight: bold;
}

.salary {
  color: orange;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
  font-size: 25px;
  margin-top: 5px;
  width: 250px;
}

.welfare ul {
  margin-top: 5px;
  /* display: flex; */
}

.welfare ul li {
  width: 120px;
  display: inline-block;
  margin: 5px;
  border-radius: 12px;
  border: 1px solid #ccc;
  background: #ffffff;
  border-color: #00000000;
  padding: 5px;
  text-align: center;
}

.information ul {
  display: flex;
  flex-direction: row;
  font-size: 14px;
}

.information ul li {
  margin-right: 20px;
}

.collection {
  width: 10%;
  height: 30px;
  margin: 10px;
  border-radius: 10px;
  border: 1px solid #00bfff;
  color: #00bfff;
  background: transparent;
  text-align: center;
  line-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.loveTitle {
  position: absolute;
  left: 45px;
}

.sendno_love {
  position: absolute;
  left: 25px;
}

.sendnoWhite {
  display: none;
  position: absolute;
  left: 25px;
}

.collection:hover {
  color: #fff;
  background-color: #00bebd;
  cursor: pointer;
}

.collection:hover .sendnoWhite {
  display: inline-block;
}

.cancel {
  width: 11%;
  height: 30px;
  margin: 10px;
  border-radius: 10px;
  border: 1px solid red;
  color: red;
  background: transparent;
  text-align: center;
  line-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.sendno_cancel {
  position: absolute;
  left: 23px;
}

.cancelWhite {
  display: none;
  position: absolute;
  left: 23px;
}

.cancel:hover {
  color: #fff;
  background-color: red;
  cursor: pointer;
}

.cancel:hover .cancelWhite {
  display: inline-block;
}

/* 下部分 */
.footer {
  margin: 10px 20% 0px 20%;

  width: 80%;
  display: flex;
}

.footer .left {
  width: 67%;
}

.job-desciption {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
}

.footer .left .recommend {
  font-size: 20px;
  font-weight: bold;
}

.footer .left .label ul li {
  color: #676667;
  margin: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  border-color: transparent;
  padding: 5px;
  margin-bottom: 0;
  display: inline-block;
}

.footer .left .content {
  font-family: monospace;
}

.footer .left .content p,
.footer .left .content div {
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 16px;
}

.footer .left .content ol {
  margin-top: 5px;
  margin-left: 20px;
  color: #333;
}

.footer .left .salarydetail .title {
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}

.footer .left .salarydetail .content ul {
  margin-top: 10px;
}

.footer .left .salarydetail .content ul li {
  margin-top: 5px;
}

/* 分割线 */
.divider {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin: 20px 0;
}

.container .content {
  display: flex;
}

.logo {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: #ccc;
  border-radius: 50%;
  margin-right: 20px;
}

.company-introduction {
  margin-top: 10px;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
}

.footer .left .introduction,
.footer .left .business-information {
  font-size: 20px;
  font-weight: bold;
}

.footer .left .company-introduction .content ul {
  margin-top: 10px;
  margin-bottom: 20px;
}

.footer .left .company-introduction .content ul li {
  margin-bottom: 5px;
}

.buscontent {
  background: white;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ccc;
  margin: 20px 2% 20px 2%;
  background: #f8f8f8;
  border-color: transparent;
  display: flex;
  flex-direction: column;
  height: 200px;
}

.above,
.under {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.under {
  margin-top: 40px;
}

.info-item {
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  width: 45%;
}

.info-item:last-child {
  margin-right: 0;
}

.info-item span:first-of-type {
  color: #ccc;
}

.footer .left .adddress {
  font-size: 20px;
  font-weight: bold;
}

.footer .left .content {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 400;
  color: #333;
  margin-bottom: 10px;
}

.all {
  color: #00bebd;
  font-weight: bold;
  margin: auto;
  margin-left: 40%;
}

/* 右边 */
.footer .right {
  width: 33%;
  margin-left: 10px;
  border-radius: 12px;
}

.companycard {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 300px;
  text-align: center;
}

.companytail {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
  font-size: 20px;
  background-color: #fafbfa;
  border-radius: 10px;
}

.company {
  display: flex;
}

.company-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  margin-right: 20px;
}

.company-name {
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.company-details ul {
  text-align: left;
}

.company-details li {
  margin-bottom: 10px;
}

.detail {
  height: 30px;
  margin: 10px;
  border-radius: 10px;
  border: 1px solid #00bfff;
  color: #00bfff;
  background: transparent;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.detail:hover {
  color: #fff;
  background-color: #00bfff;
}

.management-content {
  width: 250px;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  background-color: rgb(247 247 247);
  display: flex;
  align-items: center;
  cursor: pointer;

  .but {
    padding: 0px 10px 0px 10px;
  }

  .pre:hover {
    color: #67c23a;
  }

  .del:hover {
    color: #f56c6c;
    /* 删除链接的颜色 */
  }
}

.management-content:hover {
  background-color: rgb(221 221 221);
}

.selected {
  background-color: rgb(221 221 221);
}

a {
  color: black;
  text-decoration: none;
}

.similar {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 300px;
  text-align: center;
  margin-top: 20px;
}

.top {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
  font-size: 15px;
  background-color: #fafbfa;
  display: flex;
}

.similarPosts {
  margin-left: 10px;
  margin-right: 40%;
}

.more {
  color: #00bebd;
  cursor: pointer;
}

.similarposition {
  display: flex;
  flex-direction: column;
  border: 1px solid #ededed;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.similarposition:hover {
  border: 1px solid transparent;
  background: #f8f8f8;
}

.similartop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.similarbottom {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.similarsalary {
  font-size: 18px;
  font-family: kanzhun-Regular, kanzhun;
  color: #fe574a;
}

.similarpost,
.education {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
</style>